<div class="content">
  <h1>Connections</h1>

  <p><%= pluralize(@total_connections, "connection") %></p>

  <% if @total_connections > 0 %>
    <h3>By Database</h3>

    <div id="chart-1" class="chart pie-chart">Loading...</div>
    <%= javascript_tag nonce: true do %>
      new Chartkick.PieChart("chart-1", <%= pghero_js_value(@connections_by_database) %>);
    <% end %>

    <h3>By User</h3>

    <div id="chart-2" class="chart pie-chart">Loading...</div>
    <%= javascript_tag nonce: true do %>
      new Chartkick.PieChart("chart-2", <%= pghero_js_value(@connections_by_user) %>);
    <% end %>

    <% if @connections_by_ssl_status %>
      <h3>By Security</h3>

      <div id="chart-3" class="chart pie-chart">Loading...</div>
      <%= javascript_tag nonce: true do %>
        new Chartkick.PieChart("chart-3", <%= pghero_js_value(@connections_by_ssl_status) %>);
      <% end %>
    <% end %>

    <%= render partial: "connections_table", locals: {connection_sources: @connection_sources} %>
  <% end %>
</div>
